<template>
	<view class="container">
		<view class="mask" v-show="indexDialog">
			<view class="mask_content">
				<view  class="text_title"style="margin-bottom: 10px;">请先选择您的彩票类型：</view>
				<view class="content_list">
					<view class="content_item" v-for="(item,index) in all_list" :key="index" @click="handleChoose(item,index)">{{ item }}</view>
				</view>
			</view>
		</view>
		<view class="top_nav">
			<view class="nav_left" @click="handleback">
				<image class="left_img" src="../../static/image/left.png"></image>
			</view>
			<view class="nav_right">扫码录入</view>
		</view>
		<view class="prompt">
			<view class="title">温馨提示：</view>
			<view class="title_content">
				仅支持双色球、快乐8、福彩3D、7乐彩、超级大乐透、7星彩、排列3、排列5
			</view>
		</view>
		<view class="content">
			<image class="cai_img" :src="imgUrl"></image>
			<image class="scan_img" src="../../static/image/kk.png"></image>
		</view>
		<view class="attion">
			<view>注意:</view>
			<view>1.请将彩票完整放入识别框内</view>
			<view>2.请在光线亮度合适下识别</view>
			<view>3.请误将损坏或删改的彩票进行识别</view>
			<view>4.请将彩票平整摆放确保期次投注号完整拍摄无遮拦</view>	
		</view>
		<view class="sure_btn" @click="handleSureImage">确认</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeText:'',
				typeIndex:'',
				imgUrl:require('../../static/image/caipiao.png'),
				indexDialog:true,
				all_list:[]
			};
		},
		created() {
			this.handleGetlotteryTypelist()
		},
		methods:{
			handleback(){
				uni.navigateBack()
			},
			async handleGetlotteryTypelist(){
				let res = await this.$api.getlotterytypelist()
				if(res.code === 1 && res.data){
					this.all_list = res.data
				}
			},
			handleChoose(item,index){
				this.typeIndex = index
				this.typeText = item
				this.takePhone()
			},
			takePhone(){
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: async(res) => {
						let imagePath = res.tempFilePaths[0]
						this.imgUrl = imagePath
						this.indexDialog = false
					}
				});
				
				
				
				
			},
			async handleSureImage(){
				const self = this
				uni.showLoading({
					title:'正在识别中'
				})
				uni.uploadFile({
				    url: 'https://czz.mapp.yunchuan.info/shopapi/czz_lottery/picture', // 你的上传API地址
				    filePath: this.imgUrl,
				    name: 'file', // 这里根据API的要求进行修改
				    formData: {
						'type':self.typeIndex
				    },
					header:{
						'token':uni.getStorageSync('token')
					},
					complete(uploadFileRes) {
						if (uploadFileRes.statusCode !== 200) {
						    // 上传失败，处理错误
							this.$refs.uToast.show({
								type: 'default',
								message: '图片上传出错', 
							})
							return
						}
					},
				    success: uploadFileRes => {
						const params = uploadFileRes.data
						const params1 = self.typeIndex
						const params2 = self.typeText
						this.indexDialog = true
						 this.imgUrl = require('../../static/image/caipiao.png')
						uni.navigateTo({
							url:'/pages/Manualentry/Manualentry?lotterylist='+encodeURIComponent(JSON.stringify(params))+"&showType="+params1+"&showTypeText="+params2
						})
						uni.hideLoading()
				    },
				    fail: uploadFileError => {
				      console.error(uploadFileError);
				    }
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-image: url('../../static/image/scancode.png');
	}
	.container{
		.mask{
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			background-color: rgba(0,0,0,0.6);
			z-index: 99999;
			.mask_content{
				.text_title{
					margin-bottom: 10px;
					font-size: $font-size-18;
					font-weight: bold;
				}
				width: 80%;
				border-radius: $radius_eight;
				background-color: white;
				position: absolute;
				top: 200px;
				left: calc(50% - 40%);
				box-sizing: border-box;
				padding: 10px;
				.content_list{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					.content_item{
						width: 60px;
						color: $white_color;
						background: linear-gradient(to right, #FE5941, #F9224F);
						margin-bottom: 10px;
						border-radius: $radius_four;
						text-align: center;
						line-height: $line-height-30;
						font-size: $font-size-14;
						box-sizing: border-box;
						padding: 5px;
					}
				}
				
			}
		}
		width: 100%;
		@include flexBox(column);
		.top_nav {
			width: 100%;
			height: 44px;
			margin-top: 35px;
			box-sizing: border-box;
			display: flex;
			.nav_left{
				flex: 0.1;
				@include centerAline()
				.left_img{
					width: 16px;
					height: 16px;
				}
			}
			.nav_right{
				flex: 0.9;
				text-align: center;
				line-height: 44px;
				color: $white_color;
				font-size: $font-size-18;
				font-weight: bold;
			}
		}
		.prompt{
			width: 90%;
			height: 100px;
			margin: 0 auto;
			margin-top: 10px;
			background-color: #8f1a2b;
			border-radius: $radius_eight;
			box-sizing: border-box;
			padding: 10px;
			.title{
				width: 100%;
				height: 30px;
				line-height: $line-height-30;
				color: $white_color;
			}
			.title_content{
				width: 100%;
				color: $white_color;
			}
		}
		.content{
			width: 290px;
			height: 321px;
			margin: 0 auto;
			margin-top: 20px;
			position: relative;
			.scan_img{
				width: 100%;
				height: 321px;
			}
			.cai_img{
				position: absolute;
				top:20px;
				left: calc(50% - 120px);
				width: 240px;
				height: 280px;
			}
		}
		.attion{
			width: 90%;
			margin: 0 auto;
			margin-top: 10px;
			font-size: $font-size-14;
			color: $white_color;
		}
		.sure_btn{
			width: 90%;
			height: 50px;
			margin: 0 auto;
			margin-top: 20px;
			margin-bottom: 10px;
			text-align: center;
			line-height: 50px;
			color: $white_color;
			border-radius: $radius_thirth;
			background: linear-gradient(to right, #FF6D57, #FF4E73);
		}
	}
</style>
